<template>
  <div>
    <scroller class="scroller_detail">
      <wxc-cell class="topPart">
        <div slot="label">
          <text style="font-size:1.5em;font-weight:bold;">{{ projectDetail.name }}</text>
          <text style="font-size:0.7em;color:#ddd;margin-top:10px">{{ projectDetail.created }}</text>
        </div>
        <div slot="title" style="flex-direction:row-reverse;margin-left:15px;justify-content:center">
          <text style="margin-left:15px;">{{ projectDetail.percent | percent }}</text>
          <wxc-progress
            :value="projectDetail.percent>1?100:parseInt(projectDetail.percent * 100)"
            :bar-height="30"
            :bar-width="250"
            bar-color="rgb(148,16,1)"
          ></wxc-progress>
        </div>
      </wxc-cell>
      <text class="detailTitle">项目详情</text>
      <wxc-cell class="part" label="项目名称"
        :title="projectDetail.name"
      ></wxc-cell>
      <wxc-cell class="part" label="项目类别"
        :title="projectDetail.category | category"
      ></wxc-cell>
      <wxc-cell class="part" label="建设年限"
        :title="String(projectDetail.year)"
      ></wxc-cell>
      <wxc-cell class="part" label="建设性质"
        :title="projectDetail.type | type"
      ></wxc-cell>
      <wxc-cell class="part" label="项目实施单位"
        :title="projectDetail.builder"
      ></wxc-cell>
      <wxc-cell class="part" label="县市（园区）责任领导"
        :title="projectDetail.chargeLeader"
      ></wxc-cell>
      <wxc-cell class="part" label="县市（园区）主管部门"
        :title="projectDetail.chargeUnit"
      ></wxc-cell>
      <wxc-cell class="part" label="建设规模及主要建设内容"
        :title="projectDetail.content"
      ></wxc-cell>
      <text class="detailTitle">项目资金</text>
      <wxc-cell class="part" label="总投资（万元）"
        :title="String(projectDetail.totalMoney)"
      ></wxc-cell>
      <wxc-cell class="part" label="年计划投资（万元）"
        :title="String(projectDetail.yearMoney)"
      ></wxc-cell>
      <wxc-cell class="part" label="资金方案"
        :title="String(projectDetail.moneyPlan)"
      ></wxc-cell>
      <text class="detailTitle">项目节点进度</text>
      <wxc-cell v-for="node in nodes" :key="node.id" title="" class="part" :label="node.name">
        <div slot="title" style="display:flex;flex-direction:row">
          <text class="status" :class="node.status | nodeClass">{{node.status | nodeStatus}}</text>
          <text style="flex:1">{{ node.updated }}</text>
        </div>
      </wxc-cell>
    </scroller>
  </div>
</template>
<style>
  .inline{
    display:inline-block;
  }
  #main .scroller_detail .part{
    width:100%;
    display:inline-flex;
  }
  #main .scroller_detail .topPart{
    width:100%;
    height:100px!important;
  }
  #main .scroller_detail .part p{
    text-align:center;
  }
  #main .scroller_detail .cell-content{
    font-size:15px!important;
    color:#a0a0a0!important;
  }
  #main .scroller_detail .weex-scroller-inner{
    width:100%;
  }
  #main .scroller_detail{
    justify-content:flex-start;
    width:100%;
  }
  #main .scroller_detail .detailTitle{
    background-color:rgb(255,201,0);
    padding: 8px 10px;
    color: #fff;
    font-size: 1.2em;
  }
  #main .scroller_detail .status{
    width:50px;
    border-radius:3px;
    color:#fff;
    padding:5px;
    font-size:12px;
  }
  #main .scroller_detail .label-info {
    background-color: #5bc0de;
  }
  #main .scroller_detail .label-danger {
    background-color: #d9534f;
  }
  #main .scroller_detail .label-default {
    background-color: #777;
  }
  #main .scroller_detail .label-uninvolved {
    background-color: #000;
  }
  #main .scroller_detail .label-success {
    background-color: #5cb85c;
  }
  #main .scroller_detail .label-warning{
    background-color: #f0ad4e;
  }
</style>
<script>
  import { WxcCell, WxcProgress } from 'weex-ui';
  import { Project, Task } from '../http'
  const modal = weex.requireModule('modal');
  
  export default {
    data: () => ({
      projectDetail: '',
      nodes: []
    }),
    components: { WxcCell, WxcProgress },
    filters: {
      percent (v) {
        if (v > 1) v = 1;
        return parseInt(v * 100) + '%'
      },
      type (v) {
        switch (v) {
          case 0 : return '新建';
          case 1 : return '续建';
        }
      },
      category (v) {
        switch (v) {
          case 0 : return '第一产业';
          case 1 : return '第二产业';
          case 3 : return '第三产业';
          case 4 : return '政府投资';
        }
      },
      nodeStatus (v) {
        switch (v) {
          case 1:return '签收';
          case 2:return '受理';
          case 3:return '不予受理';
          case 4:return '办结';
          case 0:return '待办理';
          case 9:return '不涉及';
        }
      },
      nodeClass (v) {
        switch (v) {
          case 1:return 'label-warning';
          case 2:return 'label-info';
          case 3:return 'label-danger';
          case 4:return 'label-success';
          case 0:return 'label-default';
          case 9:return 'label-uninvolved';
        }
      },
    },
    created () {
      const id = this.$route.params.id;
      const self = this;
      Promise.all([Project.get(id)]).then(([response]) => {
        self.projectDetail = response.data;
        Promise.resolve(Task.getPro('year=' + response.data.year)).then(taskData => {
          self.dealData(taskData.data);
        })
      });
    },
    methods: {
      dealData (taskData) {
        var pro = {};
       taskData.map((v, i) => {
          if (pro[v.projectId]) {
            pro[v.projectId].push(v)
          } else {
            pro[v.projectId] = [];
            pro[v.projectId].push(v)
          }
        });
        var items = [];
        for (var index in pro) {
          var box = {};
          box.projectId = index;
          box.projectName = pro[index][0].projectName;
          box.node = pro[index];
          items.push(box);
        }
        this.nodes = items[0].node.reverse();
      },
    }
  };
</script>